<template>
  <div class="city">
    <App-header>
      <img slot="title" @click="prev" src="../assets/上一步.png" alt="">
      <p slot="city">{{$route.query.cityName}}{{getCount}}</p>
      <span @click="prev" slot="login">切换城市</span>
    </App-header>
    <form class="cityFrom" action="get" @submit.prevent="onSubmit">
      <div class="searchCity">
        <input type="search" v-model="search" required placeholder="输入学校、商务楼、地址" class="citySearch__item">
      </div>
      <!-- <input @click="subBtn" type="submit" name="subBtn" value="提交" class="citySubmit"> -->
    </form>
    <div class="searchHistory" v-show="historyIsDisplay && history.length">
      搜索历史
    </div>
    <div class="searchList">
      <div @click="doSearch(item)" class="searchList__item" v-for="(item, index) in getCityData" :key="index">
        <router-link class="router_link" :to="{ name: 'Shopping', query: { address: item.name, latitude: item.latitude, longitude: item.longitude, geohash: item.geohash } }">
          <h4>{{item.name}}</h4>
          <p>{{item.address}}</p>
        </router-link>
      </div>
    </div>
    <div @click='clearHistory' v-show="historyIsDisplay && history.length" class="allClear">清空所有</div>
    </div>
</template>

<script>
import AppHeader from './AppHeader.vue'
// import {message} from './co-message'
import {state} from '../store'

export default {
  name: 'City',
  data () {
    return {
      search: '',
      searchArr: [],
      historyIsDisplay: true,
      clearArr: [],
      history: [],
      msg: ''
    }
  },
  methods: {
    // 防止提交按钮的默认事件
    onSubmit () {
      return false
    },
    // 返回上一页
    prev () {
      this.$router.push({ name: 'Home' })
    },
    // 查询内容
    subBtn (e) {
      if (this.search.length === 0) {
        /* message({
          message: '请输入搜索内容',
          type: 'error'
        }) */
        this.$toast({
          message: '请输入搜索内容',
          duration: 5000
        })
      } else {
        this.$http.searchCity({
          type: 'search',
          city_id: this.$route.query.city,
          keyword: this.search
        }).then(res => {
          window.console.log(res.data)
          this.searchArr = res.data
          this.historyIsDisplay = false
        }).catch(err => {
          window.console.log(err)
        })
      }
    },
    // 把搜索的内容存起来，存放到搜索记录
    doSearch (item) {
      // todo 1.把当前点击搜索的元素存起来
      if (!this.$store.get('prevPois')) {
        this.$store.set('prevPois', [item])
      } else {
        // Array
        const prevValue = this.$store.get('prevPois')
        prevValue.push(item)
        this.$store.set('prevPois', prevValue)
      }
      // this.$store.get('prevPois')
      // this.$store.set('prevPois', item)
      // todo 2.把当前对元素对应的地址拿到并且请求对应的接口
    },
    goIndex (item) {
      item.GoCount = 1
      if (!this.$store.get('prevPois')) {
        this.$store.set('prevPois', [item])
      } else {
        const prevValue = this.$store.get('prevPois')
        const hasCurrent = true
        for (let i = 0; i < prevValue.length; i++) {
          if (item.address === prevValue[i].address) {
            prevValue[i].GoCount += 1
            this.hasCurrent = false
          }
        }
        if (hasCurrent) {
          prevValue.push(item)
        }
        this.sortKey(prevValue, 'GoCount')
        this.$store.set('prevPois', prevValue)
      }
    },
    initData () {
      // 获取搜索历史记录
      if (this.$storage.getStore('clearArr')) {
        this.searchArr = JSON.parse(this.$storage.getStore('clearArr'))
      } else {
        this.searchArr = []
      }
    },
    clearHistory () {
      this.$storage.removeStore('clearArr')
      this.initData()
    },
    // 节流
    /* requestData() {
      this.subBtn()
    }, */
    // 节流
    throttle (fn, delay) {
      let current = Date.now()
      return function () {
        let _current = Date.now()
        if (_current - current >= delay) {
          fn()
          current = _current
        }
      }
    }
  },
  components: { AppHeader },
  computed: {
    getCount () {
      return state.count
    },
    // 判断是否显示搜索历史还是搜索内容
    getCityData () {
      if (this.historyIsDisplay) {
        return this.history
      } else {
        return this.searchArr
      }
    }
  },
  created () {
    this.initData()
    // 为什么写在created：因为可以访问到this的实例
    this.$bus.$on('天王盖地虎', data => {
      this.msg = data
    })
    const history = this.$store.get('prevPois')
    if (history) {
      this.history = history
    }
    this.lazy = this.throttle(this.requestData, 350)
  },
  watch: {
    // 节流
    /* search(e) {
      this.lazy()
    } */
  }
}
</script>

<style scoped lang="scss">
  *{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
  }
  .city{
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    .cityFrom{
      width: 100%;
      height: 200px;
      border-top: 1px solid #e4e4e4;
      border-bottom: 1px solid #e4e4e4;
      margin-top: 17px;
      background-color: #fff;
      .searchCity{
        width: 90%;
        height: 115px;
        margin: 0px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .citySearch__item{
          width: 100%;
          height: 64px;
          padding: 10px;
          border: 1px solid #e4e4e4;
          border-radius: 4px;
          font-size: 28px;
          outline: none;
        }
      }
      .citySubmit{
        width: 90%;
        height: 66px;
        display: block;
        margin: 0px auto 17px;
        list-style: none;
        font-style: normal;
        text-decoration: none;
        border: none;
        font-size: 31px;
        border-radius: 4px;
        color: #fff;
        background-color: #3190e8;
      }
    }
    .searchHistory{
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      font-size: 22px;
      border-bottom: 3px solid #e4e4e4;
      border-top: 2px solid #e4e4e4;
    }
    .allClear{
      width: 100%;
      height: 100px;
      background-color: #fff;
      line-height: 100px;
      text-align: center;
    }
    .searchList{
      width: 100%;
      background-color: #fff;
      .searchList__item{
        width: 100%;
        height: 110px;
        overflow: hidden;
        padding: 35px 0px 0px;
        border-bottom: 1px solid #e4e4e4;
        h4{
          width: 90%;
          height: 40px;
          margin: 0px auto 25px;
          font-size: 30px;
          color: #333;
          font-weight: unset;
        }
        p{
          width: 90%;
          height: 30px;
          overflow: hidden;
          margin: 0px auto 25px;
          font-size: 25px;
          color: #9d9d9d;
        }
      }
    }
  }
</style>
